<template>
  <el-dialog v-model="show" width="600px" :title="title" append-to-body :close-on-click-modal="false">
    <el-form ref="matchRef" :model="form" :rules="rules" label-width="150px">
      <div v-if="activeName=='hotel'">
        <el-form-item label="酒店可预订时间" prop="hqTime" style="width: 100%">
          <el-date-picker
            v-model="form.hqTime"
            style="width: 350px"
            clearable
            type="daterange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :disabled-date="disabledDate"
          />
        </el-form-item>
        <el-form-item label="酒店退订截止时间" prop="jdEnd" style="width: 100%">
          <el-date-picker
            v-model="form.jdEnd"
            style="width: 350px"
            clearable
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="酒店退订截止时间"
            :disabled-date="disabledDate"
          />
        </el-form-item>
        <el-form-item label="酒店下单截止时间" prop="jdLast" style="width: 100%">
          <el-date-picker
            v-model="form.jdLast"
            style="width: 350px"
            clearable
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="酒店下单截止时间"
            :disabled-date="disabledDate"
          />
        </el-form-item>
      </div>
      <div v-if="activeName=='reception'">
        <el-form-item label="车辆可预订时间" prop="carTime" style="width: 100%">
          <el-date-picker
            v-model="form.carTime"
            style="width: 350px"
            clearable
            type="daterange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :disabled-date="disabledDate"
          />
        </el-form-item>
        <el-form-item label="车辆退订截止时间" prop="carOff" style="width: 100%">
          <el-date-picker
            v-model="form.carOff"
            style="width: 350px"
            clearable
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="车辆退订截止时间"
            :disabled-date="disabledDate"
          />
        </el-form-item>
        <el-form-item label="车辆下单截止时间" prop="carLast" style="width: 100%">
          <el-date-picker
            v-model="form.carLast"
            style="width: 350px"
            clearable
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="车辆下单截止时间"
            :disabled-date="disabledDate"
          />
        </el-form-item>
      </div>
      <div v-if="activeName=='dining'">
        <el-form-item label="餐饮可预订时间" prop="foodTime" style="width: 100%">
          <el-date-picker
            v-model="form.foodTime"
            style="width: 350px"
            clearable
            type="daterange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :disabled-date="disabledDate"
          />
        </el-form-item>
        <el-form-item label="餐饮退订截止时间" prop="foodOff" style="width: 100%">
          <el-date-picker
            v-model="form.foodOff"
            style="width: 350px"
            clearable
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="餐饮退订截止时间"
            :disabled-date="disabledDate"
          />
        </el-form-item>
        <el-form-item label="餐饮下单截止时间" prop="foodLast" style="width: 100%">
          <el-date-picker
            v-model="form.foodLast"
            style="width: 350px"
            clearable
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="餐饮下单截止时间"
            :disabled-date="disabledDate"
          />
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="show=false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>

import { getCurrentInstance, ref, toRefs } from 'vue'
import { reactive } from '@vue/runtime-core'
import { getActivity, putDate } from '@/api/logex/activity'
import { dayjs } from 'element-plus'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['submit'])

const show = ref(false)
const title = ref('')
const buttonLoading = ref(false)
const activeName = ref('')

const data = reactive({
  form: { },
  rules: {
    hqTime: [
      { required: true, message: '酒店可预订时间不能为空', trigger: 'blur' }
    ],
    jdEnd: [
      { required: true, message: '酒店退订截止时间不能为空', trigger: 'blur' }
    ],
    carTime: [
      { required: true, message: '车辆可预订时间不能为空', trigger: 'blur' }
    ],
    carOff: [
      { required: true, message: '车辆退订截止时间不能为空', trigger: 'blur' }
    ],
    foodTime: [
      { required: true, message: '餐饮可预订时间不能为空', trigger: 'blur' }
    ],
    foodOff: [
      { required: true, message: '餐饮退订截止时间不能为空', trigger: 'blur' }
    ]
  }
})
const { form, rules } = toRefs(data)

function submitForm() {
  proxy.$refs['matchRef'].validate(valid => {
    if (valid) {
      switch (activeName.value) {
        case 'hotel':
          form.value.hqStart = form.value.hqTime[0]
          form.value.hqEnd = form.value.hqTime[1]
          if (dayjs(form.value.hqEnd).valueOf() > dayjs(hdStartTime).valueOf()) {
            proxy.$modal.msgError('时间选择有误')
            return
          }
          break
        case 'reception':
          form.value.carStart = form.value.carTime[0]
          form.value.carEnd = form.value.carTime[1]
          if (dayjs(form.value.carEnd).valueOf() > dayjs(hdStartTime).valueOf()) {
            proxy.$modal.msgError('时间选择有误')
            return
          }
          break
        case 'dining':
          form.value.foodStart = form.value.foodTime[0]
          form.value.foodEnd = form.value.foodTime[1]
          if (dayjs(form.value.foodEnd).valueOf() > dayjs(hdStartTime).valueOf()) {
            proxy.$modal.msgError('时间选择有误')
            return
          }
          break
      }

      buttonLoading.value = true
      putDate(form.value).then(response => {
        proxy.$modal.msgSuccess('修改成功')
        show.value = false
        emit('submit')
      }).finally(() => {
        buttonLoading.value = false
      })
    }
  })
}

function reset() {
  form.value = { }
  proxy.resetForm('matchRef')
}

function disabledDate(date) {
  return date.getTime() > dayjs(hdStartTime).valueOf()
}

let hdStartTime
function open(matchId, type) {
  reset()
  show.value = true
  activeName.value = type

  getActivity(matchId).then(response => {
    hdStartTime = response.data.hdStart
    switch (activeName.value) {
      case 'hotel':
        title.value = '修改酒店时间'
        form.value = {
          id: response.data.id,
          hqStart: response.data.hqStart,
          hqEnd: response.data.hqEnd,
          jdEnd: response.data.jdEnd,
          jdLast: response.data.jdLast
        }
        form.value.hqTime = [form.value.hqStart, form.value.hqEnd]
        break
      case 'reception':
        title.value = '修改接待时间'
        form.value = {
          id: response.data.id,
          carStart: response.data.carStart,
          carEnd: response.data.carEnd,
          carOff: response.data.carOff,
          carLast: response.data.carLast
        }
        form.value.carTime = [form.value.carStart, form.value.carEnd]
        break
      case 'dining':
        title.value = '修改就餐时间'
        form.value = {
          id: response.data.id,
          foodStart: response.data.foodStart,
          foodEnd: response.data.foodEnd,
          foodOff: response.data.foodOff,
          foodLast: response.data.foodLast
        }
        form.value.foodTime = [form.value.foodStart, form.value.foodEnd]
        break
    }
  })
}
defineExpose({
  open
})
</script>


